import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, message, Row, Col, Select, Table } from 'antd';

import styles from './Push.less';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

/* eslint react/no-multi-comp:0 */
@connect(({ pushRule, loading }) => ({
  pushRule,
  loading: loading.models.pushRule,
}))
class Push extends PureComponent {
  state = {
    param: {
      type: '0',
    },
  };
  // 默认加载数据-起始方法

  // "date": "2019-04-23 21:31:00",
  // "userid": "[1000000, 1000028, 1000392, 1000416, 1000007, 1000114]",
  // "title": "二号基金止损告警",
  // "content": "INCY 达到止损位:75.60 现价73.9 买入价格79.58",
  // "type": 1
  //

  pushListTitleArr = ['标题', '内容', '时间', '被推送人'];

  pushListDataIndexArr = ['title', 'content', 'date', 'userid'];

  selectTitleArr = ['全部', '股票监控提醒', '期权成交提醒', '爬虫网站', '个股风控', '大盘周度下跌'];

  handleChange(value) {
    console.log(`selected ${value}`);
    const { dispatch } = this.props;
    const { param } = this.state;

    if (value === '全部') {
      param.type = '0';
    } else if (value === '股票监控提醒') {
      param.type = '1';
    } else if (value === '期权成交提醒') {
      param.type = '2';
    } else if (value === '爬虫网站') {
      param.type = '3';
    } else if (value === '个股风控') {
      param.type = '4';
    } else if (value === '大盘周度下跌') {
      param.type = '5';
    }

    dispatch({
      type: 'pushRule/GetPushList',
      payload: param,
    });
  }

  render() {
    const {
      pushRule: { pushListData },
    } = this.props;

    const pushListColumns = [];
    for (let i = 0; i < this.pushListTitleArr.length; i++) {
      pushListColumns.push({
        title: this.pushListTitleArr[i],
        dataIndex: this.pushListDataIndexArr[i],
      });
      if (this.pushListTitleArr[i] === '标题') {
        pushListColumns[i].width = 150;
      }
    }

    const { Option } = Select;
    const children = [];
    if (this.selectTitleArr.length > 0) {
      for (let i = 0; i < this.selectTitleArr.length; i++) {
        children.push(<Option key={this.selectTitleArr[i]}>{this.selectTitleArr[i]}</Option>);
      }
    }
    return (
      <PageHeaderWrapper title="四号仓位配置管理">
        <Card bordered={false}>
          <Row>
            <Col xs={24} sm={8}>
              <span style={{ textStyle: 'inline' }}>
                <span
                  style={{
                    fontSize: 16,
                    textAlign: 'left',
                    paddingTop: this.tableHeadPadding * 0.5,
                    paddingBottom: this.tableHeadPadding,
                    marginRight: '1rem',

                    fontWeight: '600',
                  }}
                >
                  按分类查询
                </span>

                <span className={styles.mailManage}>
                  <Select
                    defaultValue="全部"
                    style={{ width: '55%' }}
                    onChange={this.handleChange.bind(this)}
                  >
                    {children}
                  </Select>
                </span>
              </span>
            </Col>
          </Row>
          <br />
          <Row>
            {pushListData.data.length === 0 ? (
              <div />
            ) : (
              <div className={styles.tableList}>
                <Table
                  columns={pushListColumns}
                  dataSource={pushListData.data}
                  pagination={{ pageSize: 50 }}
                />
                ,
              </div>
            )}
          </Row>
        </Card>
      </PageHeaderWrapper>
    );
  }

  // 加载完 之后 再加载 此 方法
  componentDidMount() {
    this.handleChange('全部');
  }
}

export default Push;
